import { Button, Modal, Form, Input, Switch } from 'antd';
import React, { useEffect, useState } from 'react';
import '../css/Authority.less'
import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
import { AddUpdataRoles } from "../../../../api/authority"
import { Checkbox, Col, Row } from 'antd';
import type { CheckboxValueType } from 'antd/es/checkbox/Group';

interface PropsType {
    isAdd: boolean
    closeAdd(): void
    showRoles(): void
    menuList: menuType[]
}
interface menuType {
    menuId: number,
    des: string,
    menuName: string,
    menuRemark: string,
    menuUrl: null,
    pid: number,
    icon: null
}
function AddAuthority(props: PropsType) {
    const [newroleState, setNewroleState] = useState<number>(0)  //装是否启用状态
    const [form] = Form.useForm();
    const [menu, setMenu] = useState<number[]>()  //装权限
    // 3、点击取消
    const cancel = () => {
        props.closeAdd()
        form.resetFields();
    }

    // 表单布局
    const layout = {
        labelCol: {
            span: 8,
        },
        wrapperCol: {
            span: 16,
        },
    };
    // 表单验证
    const validateMessages = {
        required: '${label}必填',
        types: {
            number: '${label}必须是数值',
        },
        number: {
            range: '${label}  ${min} 到 ${max} 位',
        },
    };
    //是否启用变化
    const onChange = (checked: boolean) => {
        if (checked == true) {
            setNewroleState(1)
        } else if (checked == false) {
            setNewroleState(0)
        }
    };
    const onFinish = (values: any) => {
        props.closeAdd()
        console.log('Success:', values);
        form.resetFields();
        // dayjs.extend(utc)
        // console.log("time", dayjs.utc(new Date()).format())
        // let time = dayjs.utc(new Date()).format()
        console.log(newroleState);
        AddUpdataRoles({ menuIds: values.menu, roleJob: values.roleJob, roleName: values.roleName, roleState: newroleState }).then(res => {
            console.log('所有信息', res);
            props.showRoles()
        }).catch(err => {
            console.log('所有信息', err);
        })
    }
    //多选框变化
    const onChangeCheck = (checkedValues: CheckboxValueType[]) => {
        console.log('checked = ', checkedValues);

    }


    // 只需要保证同一次遍历中 key 不同。 listItems 和 sideBy 属于不同的遍历，可以用相同的key
    const listItem = props.menuList.map(function (item) {
        if (item.pid == 0) {
            return <Col span={8} key={item.menuId}>
                <Checkbox  value={item.menuId}>{item.menuRemark}</Checkbox></Col>
        }
    })



    return (
        <>
            {/* <Button type="primary" onClick={showModal}>
        Open Modal
      </Button> */}
            <Modal centered={true} title="修改角色" open={props.isAdd} footer={null} onCancel={cancel}>
                <Form
                    name="basic"
                    form={form}
                    {...layout}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}

                    autoComplete="off"
                >
                    <Form.Item
                        label="角色名称"
                        name="roleName"
                        rules={[{ required: true }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="职能描述"
                        name="roleJob"
                        rules={[{ required: true }]}
                    >
                        <Input.TextArea placeholder="职能描述不超过50个字" />
                    </Form.Item>
                    <Form.Item
                        valuePropName="checked"
                        label="是否启用"
                        name="roleState"

                    >
                        <Switch onChange={onChange} />
                    </Form.Item>
                    <Form.Item

                        label="权限"
                        name="menu"
                    >
                        <Checkbox.Group style={{ width: '100%' }} onChange={onChangeCheck}>
                            <Row>
                                {listItem}
                            </Row>
                        </Checkbox.Group>
                    </Form.Item>
                    <Form.Item
                        wrapperCol={{
                            ...layout.wrapperCol,
                            offset: 8,
                        }}
                    >
                        <Button type="primary" htmlType="submit" className='yes'>确定</Button>
                        <Button type="primary" onClick={cancel} ghost>取消</Button>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    );
};

export default AddAuthority;